<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '推广订单',
    navigationBarRightButton: {
      hide: true,
    },
  },
}
</route>
<template>
  <view
    class="w-full h-full bg-white overflow-hidden box-border"
    :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  >
    <view class="w-full h-full home-container">
      <wd-navbar @click-left="handleClickLeft">
        <template #title>
          <text class="text-gray-333 font-size-36 font-500">推广订单</text>
        </template>
        <template #left>
          <wd-icon
            name="chevron-left"
            class="text-gray-333 font-size-44"
            @click="pagesBack"
          ></wd-icon>
        </template>
      </wd-navbar>
      <view class="w-full h-full p-x-28 home-content">
        <view
          class="w-full hr-144 flex justify-start b-br-16 p-x-24 p-y-24 pos-relative mg-b-32 box-shadow"
          v-for="(item, index) in lessonList"
          :key="index"
        >
          <view class="wr-136 hr-96">
            <image width="100%" height="100%" :src="item.image" />
          </view>
          <view class="mg-l-20">
            <view class="flex justify-start items-center">
              <view class="wr-76 hr-36 b-br-8 flex justify-center items-center box-linear-bg">
                <text class="font-size-22 font-400 text-gray-333">
                  {{ item.subName }}
                </text>
              </view>
              <view class="font-size-28 font-500 text-gray-333 mg-l-8">
                {{ item.name }}
              </view>
            </view>
            <view class="font-size-22 text-gray-999 mg-t-14">
              <text>分享最多可得</text>
              <text class="font-size-38 text-red-1 font-500">{{ item.price }}</text>
              <text>天琴币</text>
            </view>
          </view>
          <view class="wr-150 hr-48 pos-absolute pos-right-28 pos-bottom-28">
            <!-- <wd-button type="primary" size="small">
              <text class="font-size-22 font-400 text-white line-height-none">立即分享</text>
            </wd-button> -->
          </view>
        </view>
        <!-- <view class="flex">
          <wd-tabs v-model="tab">
            <block v-for="item in tabHeader" :key="item">
              <wd-tab :title="item.title">
                <view class="w-full hr-640 overflow-auto tab-con-height">
                  <view class="w-full" v-for="(item, index) in tabContentList" :key="index">
                    <view class="flex justify-center flex-col hr-142">
                      <view
                        class="flex justify-between items-center font-400 font-size-32 line-height-none"
                      >
                        <view class="text-gray-333">{{ item.title }}</view>
                        <view class="text-blue-1" v-if="item.status === 0">+{{ item.value }}</view>
                        <view class="text-gray-333" v-if="item.status === 1">
                          -{{ item.value }}
                        </view>
                      </view>
                      <view class="text-gray-999 font-400 font-size-24 m-t-20 line-height-none">
                        {{ item.time }}
                      </view>
                    </view>
                    <view class="w-full hr-2 bg-#f5f5f5"></view>
                  </view>
                  
                </view>
              </wd-tab>
            </block>
          </wd-tabs>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { shareGetOrders } from '@/service/my/my'

defineOptions({
  name: 'ShareLedger',
})
const { safeAreaInsets } = uni.getSystemInfoSync()
const handleClickLeft = () => {}
const pagesBack = () => {
  uni.navigateBack()
}
// const tab = ref(0)
// const tabHeader = ref([
//   { title: '全部' },
//   { title: '课程' },
//   { title: '训练营' },
//   { title: '冥想' },
//   { title: '直播' },
// ])
const lessonList = ref([])
onLoad(() => {})
onShow(() => {
  getData()
})
const getData = () => {
  shareGetOrders().then((res: any) => {
    console.log(res)
    if (res.data) {
      res.data.data.forEach((item) => {
        if (item.orderGoods.length > 0) {
          const imgItem: any = item.orderGoods[0]
          lessonList.value.push({
            image: imgItem.pic,
            name: imgItem.name,
            subName: item.share_status,
            price: item.share_bonus,
          })
        }
      })
    }
  })
}
</script>

<style scoped lang="scss">
.home-container {
  position: relative;
  z-index: 1;
}
.home-content {
  height: calc(100% - var(--wot-navbar-height, 88rpx));
  overflow: auto;
}
.box-linear-bg {
  background: linear-gradient(90deg, #ece7f6 0%, #dfdfff 100%);
}
.tab-con-height {
  height: calc(100vh - 256rpx);
}
::v-deep .wd-button {
  width: 100% !important;
  height: 100% !important;
}
::v-deep .wd-tabs__nav-item {
  font-size: 32rpx !important;
  color: #312f2a !important;
}
</style>
